import React from 'react';
import {HashRouter as Router, Route, Link} from 'react-router-dom';
import Main from './index';

export default class IRouter extends React.Component {
  render() {
    return (
      <Router>
        <Main>
          {/*<Route path='/' component={Home}/>*/}
          <Route path='/home' render={() => (
            <Home>
              <Route path='/home/a' component={About}/>
            </Home>
          )}/>
          <Route exact path='/about' component={About}/>
          <Route path="/about/a" component={AboutA}/>
        </Main>
      </Router>
    )
  }
}

class Home extends React.Component {
  render () {
    return (
      <div>
        <h2>Home Content</h2>
        <Link to='/home/a'>嵌套路由</Link>
        <hr/>
        {this.props.children}
      </div>
    )
  }
}

// function Home() {
//   return (
//     <div>
//       <h2>Home Content</h2>
//       <hr/>
//       {this.props.children}
//     </div>
//   )
// }

function About() {
  return (
    <div>
      <h2>About Content</h2>
    </div>
  )
}

function AboutA() {
  return (
    <div><h2>AboutA Content</h2></div>
  )
}
